// 登录的Vue组件
Vue.component("login",{
    //el : "#app"
    // 元素内容必须是单根节点
    template:`
    <span>
        <slot name="nologin" v-if="user==null">
            <a href="#" @click.prevent="showLogin=true">登录</a>
            <a href="#">注册</a>
            <a href="#" @click.prevent="showForget=true">忘记密码</a>
        </slot>
        <slot name="logined" v-else :user="user" :prop="prop">
            欢迎 {{user[prop.nameColumn]}}
            <a href="#" @click.prevent="showUpdatePwd=true">修改密码</a>
            <a href="/login/logout">退出</a>
        </slot>
        
        <el-dialog title="登录窗口" :visible.sync="showLogin">
          <el-form>
            <el-form-item label="账号:" :label-width="100">
              <el-input v-model="form.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码:" :label-width="100">
              <el-input v-model="form.password" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="showLogin = false">取 消</el-button>
            <el-button type="primary" @click="login">确 定</el-button>
          </div>
        </el-dialog>
        
        <el-dialog title="忘记密码窗口" :visible.sync="showForget">
          <el-steps :active="forgetActive" finish-status="success">
              <el-step title="步骤 1: 发送验证邮件"></el-step>
              <el-step title="步骤 2: 重置密码"></el-step>
          </el-steps>
          <div v-if="forgetActive==0" style="height: 100px; text-align: center">
                <el-input v-model="form1.username" placeholder="请输入您账号"></el-input><br>
                <el-button @click="forget()">发送验证码</el-button>
          </div>
          <div v-else-if="forgetActive==1" style="height: 100px; text-align: center">
                <el-input v-model="form1.vcode" placeholder="请输入验证码"></el-input><br>
                <el-input v-model="form1.pwd" placeholder="请输入新密码"></el-input><br>
                <el-input v-model="form1.rePwd" placeholder="请输入确认密码"></el-input><br>
                <el-button @click="resetPwd()">重置密码</el-button>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="showForget = false">取 消</el-button>
          </div>
        </el-dialog>
        <el-dialog title="修改密码" :visible.sync="showUpdatePwd">
               <el-form >
                    <el-form-item label="旧密码:" >
                      <el-input  type="password" v-model="form2.oldPwd" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" >
                      <el-input type="password" v-model="form2.pwd" autocomplete="off"></el-input>
                    </el-form-item>
                     <el-form-item label="确认密码" >
                      <el-input type="password" v-model="form2.rePwd" autocomplete="off"></el-input>
                    </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="showUpdatePwd = false">取 消</el-button>
                <el-button type="primary" @click="updatePwd">确 定</el-button>
              </div>
        </el-dialog>
    </span>
    `,
    props:["route"],
    data(){
        return {
            user: null,
            prop: {},
            showLogin: false,
            showForget: false,
            showUpdatePwd:false,
            form: {username:"", password:""},
            forgetActive : 0,
            form1:{
                username:"",
                pwd:"",
                rePwd:"",
                vcode:""
            },
            form2:{
                oldPwd:"",
                pwd:"",
                rePwd:"",
            },

        }
    },
    created(){
        // 初始值 ''
        this.route = this.route || '';
        axios.get(this.route + "/login/props").then(res=>{
            this.prop = res.data;
            axios.get(this.route + "/login/myinfo").then(res=>{
                if(res.data.code == 1){
                    this.$emit("logined", res.data.data);
                } else {
                    this.$emit("logined", null);
                }
                this.user = res.data.data;
            });
        });
    },
    methods:{
        login(){
            axios.get(this.route + "/login/login",{
                params: this.form
            }).then(res=>{
                if(res.data.code == 1){
                    this.$message(res.data.msg);
                    this.showLogin = false;
                    this.user = res.data.data;
                    this.$emit("logined", res.data.data);
                } else {
                    this.$alert(res.data.msg);
                }
            })
        },
        forget(){
            axios.get(this.route + "/login/forget?username=" + this.form1.username).then(res=>{
                if(res.data.code == 1){
                    this.forgetActive = 1;
                } else {
                    this.$alert(res.data.msg);
                }
            })
        },
        resetPwd(){
            axios.get(this.route + "/login/resetPwd", {
                params:this.form1
            }).then(res=>{
                if(res.data.code == 1){
                    this.$message(res.data.msg);
                } else {
                    this.$alert(res.data.msg);
                }
            })
        },
        updatePwd(){
            axios.get(this.route + "/login/updatePwd", {params:this.form2}).then(res=>{
                if(res.data.code === 200){
                    this.$message.success(res.data.msg);
                    this.showUpdatePwd=false;
                }else{
                    this.$message.error(res.data.msg);
                }
            })
        },
    }

});